<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <meta name="format-detection" content="telephone=no" />
  <meta name="format-detection" content="email=no" />
  <title>查看物流</title>
  <link rel="stylesheet" href="../../css/api.css">
  <link rel="stylesheet" href="../../css/vant.css">
  <link rel="stylesheet" href="../../css/main.css">
  <style></style>
</head>

<body>
  <div class="app" v-cloak>
    <div class="my-edit" style="border-top: #f7f7f7 solid 0.04rem; ">
      <div class="main">
        <div class="logistics-info">
          <div class="info-item">
            <div class="info-key">运单号</div>
            <div class="info-value">{{logisticsInfo.expressNo}}</div>
          </div>
          <div class="info-item">
            <div class="info-key">承运商</div>
            <div class="info-value">{{logisticsInfo.expressCompany}}</div>
          </div>
        </div>
        <div class="logistics-steps">
          <van-steps :active="active" active-color="#3F8CEC" inactive-color="#3F8CEC" direction="vertical">
            <van-step v-for="(trace,index) in logisticsInfo.traces">
              <div class="steps-detail" style="color: #333;">{{trace.context}}</div>
              <div class="steps-date" style="color: #999;">{{trace.time}}</div>
            </van-step>
          </van-steps>
        </div>
      </div>
    </div>

  </div>
  <script src="../../script/api.js"></script>
  <script src="../../script/flexible.js"></script>
  <script src="../../script/fastclick.js"></script>
  <script src="../../script/vue.min.js"></script>
  <script src="../../script/iconfont.js"></script>
  <script src="../../script/vant.min.js"></script>
  <script src="../../script/common.js"></script>
  <script src="../../script/restful.js"></script>
  <script src="../../script/businessCommon.js"></script>
  <script>
    apiready = function () {
      vm = new Vue({
        el: '.app',
        data: {
          active: 0,
          queryParam:{
            id: api.pageParam.orderId,
            type: api.pageParam.type
          },
          logisticsInfo:{}
        },
        filters: {
            handleTime(timestamp) {
                if (!timestamp) {
                    return ''
                }
                var date = new Date(timestamp);
                Y = date.getFullYear();
                M = (date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1);
                D = (date.getDate() < 10 ? '0' + (date.getDate()) : date.getDate())
                h = (date.getHours() < 10 ? '0' + (date.getHours()) : date.getHours());
                m = (date.getMinutes() < 10 ? '0' + (date.getMinutes()) : date.getMinutes());
                s = (date.getSeconds() < 10 ? '0' + (date.getSeconds()) : date.getSeconds());
                return Y + '.' + M + '.' + D + ' ' + h + ':' + m + ':' + s
            }
        },
        mounted() {
          this.seeLogistics()
        },
        methods: {
          seeLogistics(){
            order('seeLogistics')(this.queryParam,function(ret){
              if (ret.data && ret.data.length >= 1) {
                vm.logisticsInfo = ret.data[0]
              }
            })
          }
        },
      })
    }
  </script>
</body>

</html>